<template>
	<!-- <view class="market-tab flex font-size-12">
		<view class="flex flex-dir-col flex-ai-center left item" :class="{active:value==1}" @click="cahngeType(1)">
			<text>{{handleLang('当前寄售')}}</text>
			<text class="font-size-10">{{marketCount}}{{handleLang('单')}}</text>
		</view>
		<view class="flex flex-dir-col flex-ai-center right item" :class="{active:value==2}" @click="cahngeType(2)">
			<text>{{handleLang('当前求购')}}</text>
			<text class="font-size-10">{{buyCount}}{{handleLang('单')}}</text>
		</view>
		<view class="flex flex-dir-col flex-ai-center right item" :class="{active:value==3}" @click="cahngeType(3)">
			<text>{{handleLang('当前委托')}}</text>
			<text class="font-size-10">{{buyCount}}{{handleLang('单')}}</text>
		</view>
		<view class="flex flex-dir-col flex-ai-center right item" :class="{active:value==4}" @click="cahngeType(4)">
			<text>{{handleLang('当前成交')}}</text>
			<text class="font-size-10">{{buyCount}}{{handleLang('单')}}</text>
		</view>
	</view> -->
	<view class="flex flex-ai-center flex-js-sb" style="width: 100%;">
		<view class="flex flex-ai-center font-size-12" @click="cahngeType(item.value)" v-for="(item,index) in tabs" :key="item.name" :class="value == item.value?'active':'default'">
			<w-icon class="mr-4" :name="item.icon" v-if="item.icon"></w-icon>
			<view  >{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MarketTypeTab",
		props: {
			value: {
				type: Number,
				default: 1
			},
			marketCount: {
				type: Number,
				default: 0
			},
			buyCount: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				tabs:[
					{
						name:'寄售列表',
						value:1
					},
					{
						name:'委托购买',
						value:3,
						icon:'hot'
					},
					{
						name:'竞价购买',
						value:2
					},
					{
						name:'当前成交',
						value:4
					}
				]
			};
		},
		model: {
			prop: 'value',
			event: "change"
		},
		methods: {
			cahngeType(v) {
				this.$emit('change', v)
			}
		}


	}
</script>

<style lang="scss">
	.active {
		padding: 16rpx;
		background: rgba(255,255,255,0.1);
		border-radius: 4px 4px 4px 4px;
		border: 1px solid $theme-color;
		color: $theme-color;
		
	}
	.default {
		padding: 16rpx;
		background: rgba(255,255,255,0.1);
		border-radius: 4px 4px 4px 4px;
		border: 1px solid rgba(255,255,255,0.3);
	}
	.market-tab {
		margin: 0 auto;
		background: #fff;
		border-radius: 40rpx;
		border: 1rpx solid #D8D8D8;
		@extend .pa-3;

		.item {
			width: 160rpx;		    
			height: 70rpx;
			border-radius: 32rpx;
			@extend .flex, .flex-dir-col, .flex-js-center, .font-color-999;
		}

		.item.active {
			@extend .font-color-white;

		}

		.active.left {
			animation: toLeft .3s linear;
			background: $theme-jb-color;
		}

		.active.right {
			animation: toRight .3s linear;
			background: $theme-jb-color;
		}
	}

	@keyframes toLeft {
		from {
			transform: translateX(280rpx);
			opacity: 0.3;
		}

		to {
			transform: translateX(0rpx);
			opacity: 1;
		}
	}

	@keyframes toRight {
		from {
			transform: translateX(-280rpx);
			opacity: 0.3;
		}

		to {
			transform: translateX(0rpx);
			opacity: 1;
		}
	}
</style>